<template>
  <div class="box">
    <div class="btn" v-if="role === '1'">
      <a-space size="middle">
        <!-- <a-button size="large" @click="openAddIcon" type="primary">
          <PlusOutlined />
          新增图标
        </a-button> -->
        <a-button size="large" @click="openAddForm" type="primary">
          <PlusOutlined />
          新增招新
        </a-button>
      </a-space>
      <add-recruitment ref="RefChilde" @getData="changePage(paginationProps.current, paginationProps.pageSize)" />
      <update-icon ref="RefAddIcon" />
    </div>
    <a-table :columns="role === '1' ? superColumns : adminColumns" :data-source="data" rowKey="id" :pagination="paginationProps">
      <template #status="{ text }">
        <p v-if="text === 0">未开始</p>
        <p v-else-if="text === 1">报名中</p>
        <p v-else-if="text === 2">停止报名</p>
        <p v-else-if="text === 3">已结束</p>
        <p v-else>不在小程序显示</p>
      </template>
      <template #count="{ text, record }">
        <a @click="openUserModal(record.id)">{{ text }}</a>
      </template>
      <template #time="{ text }">
        {{ text.substring(0, 10) }}
      </template>
      <template #action="{ record }">
        <a-button type="primary" style="margin-right: 10px" @click="goCheck(record.id)">编辑</a-button>
        <a-popconfirm title="确定要删除该招新?" ok-text="删除" cancel-text="取消" @confirm="onDelete(record.id)">
          <a-button style="margin-right: 10px">删除</a-button>
        </a-popconfirm>
        <edit-recruitment ref="RefEditChilde" @getData="changePage(paginationProps.current, paginationProps.pageSize)" :id="chosId" />
        <check-user ref="RefUserChilde" :id="recruit_id"></check-user>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { defineComponent, Ref, ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'
import AddRecruitment from './AddRecruitment.vue'
import EditRecruitment from './EditRecruitment.vue'
import UpdateIcon from '../../../components/recruitment/UpdateIcon.vue'
import CheckUser from '../../../components/recruitment/CheckUser.vue'
import { get, detele } from '../../../utils/request/request'

const adminColumns = [
  {
    title: '标题',
    dataIndex: 'title',
    width: '20%',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: '15%',
    align: 'center',
    slots: { customRender: 'status' }
  },
  { title: '报名人数', dataIndex: 'count', width: '15%', align: 'center', slots: { customRender: 'count' } },
  {
    title: '结束时间',
    dataIndex: 'end_time',
    width: '15%',
    align: 'center',
    slots: { customRender: 'time' }
  },
  { title: '创建人', dataIndex: 'create_by', width: '15%', align: 'center' }
]

const superColumns = [
  {
    title: '标题',
    dataIndex: 'title',
    width: '20%',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: '15%',
    align: 'center',
    slots: { customRender: 'status' }
  },
  { title: '报名人数', dataIndex: 'count', width: '15%', align: 'center', slots: { customRender: 'count' } },
  {
    title: '结束时间',
    dataIndex: 'end_time',
    width: '15%',
    align: 'center',
    slots: { customRender: 'time' }
  },
  { title: '创建人', dataIndex: 'create_by', width: '15%', align: 'center' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 250,
    align: 'center',
    slots: { customRender: 'action' }
  }
]

interface DataItem {
  id: number
  title: string
  status: number
  create_by: string
  end_time: string
  count: number
}

interface PaginationProps {
  current: number
  pageSize: number
  total: number
  showSizeChanger: boolean
  pageSizeOptions: string[]
  showTotal: (total: string) => string
  onChange: (current: number, pageSize: number) => Promise<void>
  onShowSizeChange: (current: number, pageSize: number) => Promise<void>
}

const data: Ref<DataItem[]> = ref([])

// 触发添加事件
const useAddRecruitmentEffect = () => {
  const RefChilde = ref()
  const openAddForm = () => {
    RefChilde.value.showDrawer()
  }
  return { RefChilde, openAddForm }
}

// 触发编辑事件
const useEditAmdinEffect = () => {
  const RefEditChilde = ref()
  const openEditModal = () => {
    RefEditChilde.value.showDrawer()
  }
  return { RefEditChilde, openEditModal }
}

// 触发查看用户事件
const useCheckUserEffect = () => {
  const recruit_id = ref<any>()
  const RefUserChilde = ref()
  const openUserModal = (id: number) => {
    recruit_id.value = id
    RefUserChilde.value.showModal()
  }
  return { RefUserChilde, openUserModal, recruit_id }
}

// 触发上传图标事件
const useAddIconEffect = () => {
  const RefAddIcon = ref()
  const openAddIcon = () => {
    RefAddIcon.value.showDrawer()
  }
  return { RefAddIcon, openAddIcon }
}

// 操作相关逻辑
const useOperationEffect = (paginationProps: Ref<PaginationProps>) => {
  const chosId = ref<any>()
  const chosusername = ref<string>('')
  const chosname = ref<string>('')
  const chosrole = ref<number>()
  const token: string = localStorage.getItem('token') as string
  const { changePage } = useTableDataEffect()
  const { RefEditChilde, openEditModal } = useEditAmdinEffect()
  const onDelete = async (id: number) => {
    const res: any = await detele(`/admin/api/v1/recruitment/${id}`, {}, token)
    if (res.status_code == 0) {
      message.success('删除成功')
      changePage(paginationProps.value.current, paginationProps.value.pageSize)
    } else {
      message.error('删除失败')
    }
  }
  const goCheck = (id: number) => {
    chosId.value = id
    openEditModal()
  }
  return {
    RefEditChilde,
    onDelete,
    goCheck,
    chosId,
    chosusername,
    chosname,
    chosrole
  }
}

// 表格数据相关逻辑
const useTableDataEffect = () => {
  const detailData = ref<DataItem>()
  const token: string = localStorage.getItem('token') as string
  // 分页配置
  const paginationProps = ref({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '15', '20'],
    // showQuickJumper: true,
    showTotal: (total: string) => `共${total}场招新`,
    onChange: (current: number, pageSize: number) => changePage(current, pageSize),
    onShowSizeChange: (current: number, pageSize: number) => changePage(current, pageSize)
  })
  const changePage = async (pageNumber: number, pageSize: number) => {
    const res: any = await get(`/admin/api/v1/recruitment/list?page=${pageNumber}&limit=${pageSize}`, token)
    paginationProps.value.current = res.page
    paginationProps.value.pageSize = res.limit
    paginationProps.value.total = res.total
    data.value = res.data
  }
  return {
    paginationProps,
    detailData,
    changePage
  }
}

export default defineComponent({
  components: {
    PlusOutlined,
    AddRecruitment,
    UpdateIcon,
    CheckUser,
    EditRecruitment
  },
  setup() {
    const role = ref<string>(localStorage.getItem('role') as string)
    const { RefChilde, openAddForm } = useAddRecruitmentEffect()
    const { detailData, paginationProps, changePage } = useTableDataEffect()
    const { RefEditChilde, onDelete, goCheck, chosId, chosusername, chosname, chosrole } = useOperationEffect(paginationProps)
    const { RefUserChilde, openUserModal, recruit_id } = useCheckUserEffect()
    const { RefAddIcon, openAddIcon } = useAddIconEffect()

    onMounted(() => {
      changePage(1, 10)
    })

    return {
      role,
      paginationProps,
      openUserModal,
      RefUserChilde,
      RefChilde,
      openAddForm,
      data,
      adminColumns,
      superColumns,
      onDelete,
      goCheck,
      chosId,
      recruit_id,
      chosusername,
      chosname,
      chosrole,
      detailData,
      changePage,
      RefEditChilde,
      RefAddIcon,
      openAddIcon
    }
  }
})
</script>

<style lang="less" scoped>
.btn {
  padding-bottom: 15px;
  text-align: right;
}
body {
  position: relative;
}
.box {
  position: relative;
  min-height: 700px;
}
.pagination {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
